<template>
	<view>
		<form v-if="user.shiming<2 && loading==false" >
			<view class="kuang margin-sm padding-sm bg-white">
				<view class="text-bold text-orange">进行企业认证，可以开通API功能。</view>
				<view class="text-orange">实名认证的个人信息必须是企业的法人，不然审核不通过。</view>
			</view>
			<view class="margin-sm radius">
				<view class="cu-form-group margin-top ">
					<view class="title">企业名称</view>
					<input placeholder="请输入企业名称" v-model="bussname"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">信用代码</view>
					<input placeholder="请输入正确的统一社会信用代码" v-model="providers"></input>
				</view>
			</view>
			<view class="margin-sm bg-white radius">
				<view class="flex solid-bottom padding-sm justify-between">
					<view class="padding-sm">
						<view class="text-center">
							营业执照（<text class="text-orange">示例</text>）
						</view>
						<view class="cu-form-group" style="width: 300rpx;padding: 2px;">
							<view class="grid col-1 grid-square flex-sub">
								<view class="bg-img" style="margin-top: 5px;padding-bottom: 80%;" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" data-da="a" :data-url="imgList[index]">
								 <image :src="imgList[index]" mode="aspectFill" ></image>
									<view class="cu-tag bg-red"  @tap.stop="DelImg" :data-index="index" data-da="a">
										<text class='cuIcon-close'></text>
									</view>
									<view class="cu-progress round sm striped active progress" v-show="aup">
										<view class="bg-green" :style="'width:'+apro+'%;height: 4px;'"></view>
									</view>
								</view>
								<view class="solids" style="margin-top: 5px;padding-bottom: 80%;" @tap="ChooseImage" v-if="imgList.length<1">
									<text class='cuIcon-cameraadd'></text>
								</view>
							</view>
						</view>
						<view class="text-center" v-if="atipsis==0">
							<text class="text-green">上传成功</text>
						</view>
						<view class="text-center" v-else-if="atipsis==1">
							<text class="text-pink">{{errmsg}}</text>
						</view>
					</view>
					<view class="padding-sm text-Abc text-sm">
						<view class="margin-bottom-sm margin-top-xl">
							1、营业执照必须在有效期内，没有作假痕迹；
						</view>
						<view class="margin-bottom-sm">
							2、营业执照信息清晰可见，无遮挡；
						</view>
						<view class="margin-bottom-sm">
							3、营业执照法人必须和实名认证身份证吻合，一致；
						</view>
					</view>
				</view>
			</view>
			<view class="margin-sm bg-white radius">
				<view class="flex solid-bottom padding-sm justify-between">
					<view class="padding-sm">
						<view class="text-center">
							开户许可证（<text class="text-orange">示例</text>）
						</view>
						<view class="cu-form-group" style="width: 300rpx;padding: 2px;">
							<view class="grid col-1 grid-square flex-sub">
								<view class="bg-img" style="margin-top: 5px;padding-bottom: 80%;" v-for="(item,index) in imgListb" :key="index" @tap="ViewImage" data-da="b" :data-url="imgListb[index]">
								 <image :src="imgListb[index]" mode="aspectFill"></image>
									<view class="cu-tag bg-red"  @tap.stop="DelImg" :data-index="index" data-da="b">
										<text class='cuIcon-close'></text>
									</view>
									<view class="cu-progress round sm striped active progress" v-show="bup">
										<view class="bg-green" :style="'width:'+bpro+'%;height: 4px;'"></view>
									</view>
								</view>
								<view class="solids" style="margin-top: 5px;padding-bottom: 80%;" @tap="ChooseImageb" v-if="imgListb.length<1">
									<text class='cuIcon-cameraadd'></text>
								</view>
							</view>
						</view>
						<view class="text-center" v-if="btipsis==0">
							<text class="text-green">上传成功</text>
						</view>
						<view class="text-center" v-else-if="btipsis==1">
							<text class="text-pink">{{berrmsg}}</text>
						</view>
					</view>
					<view class="padding-sm text-Abc text-sm">
						<view class="margin-bottom-sm margin-top-xl">
							1、开户许可证必须在有效期内，没有作假痕迹；
						</view>
						<view class="margin-bottom-sm">
							2、开户许可证信息清晰可见，无遮挡；
						</view>
					</view>
				</view>
			</view>
			<view class="padding-sm ">
				<text class="text-gray">
					您提供的照片信息仅作为{{app.title}}实名认证使用，我们不会泄露用户任何隐私！
			</text>
			</view>
			<view class="padding-sm flex flex-direction">
				<button class="cu-btn bg-red margin-tb-sm lg"  @tap="authsub" style="width: 100%;">提交审核</button>
			</view>
		</form>
		<view class="" v-else-if="user.shiming==3 && loading==false">
			<view class="kuang margin-sm padding-sm bg-white">
				<view class="text-bold text-orange">审核中...</view>
			</view>
			<view class="margin-sm radius">
				<view class="cu-form-group margin-top ">
					<view class="title">企业名称</view>
					<text>{{user.userReal.company_name}}</text>
				</view>
				<view class="cu-form-group">
					<view class="title">信用代码</view>
					<text>{{user.userReal.canada}}</text>
				</view>
			</view>
			<view class="padding" >
				<button class="cu-btn bg-blue lg" style="width: 100%;">升级企业认证</button>
			</view>
		</view>
		<view class="" v-else-if="user.shiming==2 && loading==false">
			<view class="kuangg margin-sm padding-sm bg-white text-center">
				<view class="text-bold text-green">认证成功</view>
			</view>
			<view class="margin-sm radius">
				<view class="cu-form-group margin-top ">
					<view class="title">企业名称</view>
					<text>{{user.userReal.company_name}}</text>
				</view>
				<view class="cu-form-group">
					<view class="title">信用代码</view>
					<text>{{user.userReal.canada}}</text>
				</view>
			</view>
		</view>
		<form v-if="user.shiming==4 && loading==false" >
			<view class="kuangs margin-sm padding-sm bg-white">
				<view class="text-bold text-pink">失败原因:{{user.userReal.remarks}}</view>
			</view>
			<view class="margin-sm radius">
				<view class="cu-form-group margin-top ">
					<view class="title">企业名称</view>
					<input placeholder="请输入企业名称" v-model="bussname"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">信用代码</view>
					<input placeholder="请输入正确的统一社会信用代码" v-model="providers"></input>
				</view>
			</view>
			<view class="margin-sm bg-white radius">
				<view class="flex solid-bottom padding-sm justify-between">
					<view class="padding-sm">
						<view class="text-center">
							营业执照（<text class="text-orange">示例</text>）
						</view>
						<view class="cu-form-group" style="width: 300rpx;padding: 2px;">
							<view class="grid col-1 grid-square flex-sub">
								<view class="bg-img" style="margin-top: 5px;padding-bottom: 80%;" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" data-da="a" :data-url="imgList[index]">
								 <image :src="imgList[index]" mode="aspectFill" ></image>
									<view class="cu-tag bg-red"  @tap.stop="DelImg" :data-index="index" data-da="a">
										<text class='cuIcon-close'></text>
									</view>
									<view class="cu-progress round sm striped active progress" v-show="aup">
										<view class="bg-green" :style="'width:'+apro+'%;height: 4px;'"></view>
									</view>
								</view>
								<view class="solids" style="margin-top: 5px;padding-bottom: 80%;" @tap="ChooseImage" v-if="imgList.length<1">
									<text class='cuIcon-cameraadd'></text>
								</view>
							</view>
						</view>
						<view class="text-center" v-if="atipsis==0">
							<text class="text-green">上传成功</text>
						</view>
						<view class="text-center" v-else-if="atipsis==1">
							<text class="text-pink">{{errmsg}}</text>
						</view>
					</view>
					<view class="padding-sm text-Abc text-sm">
						<view class="margin-bottom-sm margin-top-xl">
							1、营业执照必须在有效期内，没有作假痕迹；
						</view>
						<view class="margin-bottom-sm">
							2、营业执照信息清晰可见，无遮挡；
						</view>
						<view class="margin-bottom-sm">
							3、营业执照法人必须和实名认证身份证吻合，一致；
						</view>
					</view>
				</view>
			</view>
			<view class="margin-sm bg-white radius">
				<view class="flex solid-bottom padding-sm justify-between">
					<view class="padding-sm">
						<view class="text-center">
							开户许可证（<text class="text-orange">示例</text>）
						</view>
						<view class="cu-form-group" style="width: 300rpx;padding: 2px;">
							<view class="grid col-1 grid-square flex-sub">
								<view class="bg-img" style="margin-top: 5px;padding-bottom: 80%;" v-for="(item,index) in imgListb" :key="index" @tap="ViewImage" data-da="b" :data-url="imgListb[index]">
								 <image :src="imgListb[index]" mode="aspectFill"></image>
									<view class="cu-tag bg-red"  @tap.stop="DelImg" :data-index="index" data-da="b">
										<text class='cuIcon-close'></text>
									</view>
									<view class="cu-progress round sm striped active progress" v-show="bup">
										<view class="bg-green" :style="'width:'+bpro+'%;height: 4px;'"></view>
									</view>
								</view>
								<view class="solids" style="margin-top: 5px;padding-bottom: 80%;" @tap="ChooseImageb" v-if="imgListb.length<1">
									<text class='cuIcon-cameraadd'></text>
								</view>
							</view>
						</view>
						<view class="text-center" v-if="btipsis==0">
							<text class="text-green">上传成功</text>
						</view>
						<view class="text-center" v-else-if="btipsis==1">
							<text class="text-pink">{{berrmsg}}</text>
						</view>
					</view>
					<view class="padding-sm text-Abc text-sm">
						<view class="margin-bottom-sm margin-top-xl">
							1、开户许可证必须在有效期内，没有作假痕迹；
						</view>
						<view class="margin-bottom-sm">
							2、开户许可证信息清晰可见，无遮挡；
						</view>
					</view>
				</view>
				
			</view>
			<view class="padding-sm ">
				<text class="text-gray">
					您提供的照片信息仅作为{{app.title}}实名认证使用，我们不会泄露用户任何隐私！
			</text>
			</view>
			<view class="padding-sm flex flex-direction">
				<button class="cu-btn bg-red margin-tb-sm lg"  @tap="authsub" style="width: 100%;">提交审核</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bussname:null,
				providers:null,
				user:[],
				imgList:[],
				imgListb:[],
				loading:true,
				ima:null,
				imb:null,
				apro:0,
				aup:false,
				atipsis:2,
				errmsg:"",
				bpro:0,
				bup:false,
				btipsis:2,
				berrmsg:"",
				app: this.app
			}
		},
		onLoad() {
			uni.showLoading({
				title:'加载中...',
				mask:true
			})
			var that=this
			this.getUser()
		},
		methods: {
			getUser(){
				var that=this;
				uni.request({
					url: that.app.apiHost+"/mindex",
					method:'POST',
					header:{'Authorization':'bearer '+that.app.getAuthCode()},
					success:(res)=>{
						uni.hideLoading()
						console.log(res.data);
						if(res.data.code == -1){
							that.app.showMsg('请登陆后再操作!','../login/login');
						}
						if(res.data.code==0){
							that.loading=false
							uni.setStorageSync("users",JSON.stringify(res.data.data))
							that.user=res.data.data
							if(res.data.data.shiming==4){
								let bussres=res.data.data.userReal
								that.bussname=bussres.company_name
								that.providers=bussres.canada
								that.imgList.push(bussres.canada_img)
								that.imgListb.push(bussres.xuke_img)
							}else if(res.data.data.shiming==0){
								that.app.showMsg('请先进行个人认证!','authlist');
								}
						}
					},
					fail(res) {
						console.log(res);
					}
				})
			},
			authsub(){
				var that=this
				if(this.bussname=="" || this.bussname==null){
					that.app.showMsg('请输入企业名称!');
					return;
				}
				if(this.providers=="" || this.providers==null){
					that.app.showMsg('请输入企业信用代码!');
					
					return;
				}
				if(this.ima=="" || this.ima==null){
					that.app.showMsg('请上传营业执照!');
					
					return;
				}
				if(this.imb=="" || this.imb==null){
					that.app.showMsg('请上传开户许可证!');
					return;
				}
				uni.showLoading({
					title:'通讯中...',
					mask:true
				})
				uni.request({
					url: this.app.apiHost+"/enterprise",
					header:{'Authorization':'bearer '+this.app.getAuthCode()},
					method:"POST",
					data:{
						company_name:that.bussname,
						canada:that.providers,
						canada_img:that.ima,
						xuke_img:that.imb,
					},
					success: (data) => {
						uni.hideLoading()
						if(data.data.code == -1){
							that.app.showMsg('请登陆后再操作!','../login/login');
						}
						if(data.data.code==0){
							 this.app.showMsg("认证提交成功，等待审核");
							 that.isreal=1
						}else if(data.data.code==1){
							this.app.showMsg(data.data.msg);
							return;
						}
					},fail() {
						
					}
				})
			},
			ChooseImage() {
				var that=this
				that.aup=true
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
							this.imgList = res.tempFilePaths
							const uploadTask = uni.uploadFile({
										url: that.app.apiHost+'/uploadImage', //仅为示例，非真实的接口地址
										filePath: this.imgList[0],
										header:{'Authorization':'bearer '+that.app.getAuthCode()},
										name: 'image',
										success: (uploadFileRes) => {
											console.log(uploadFileRes.data,56);
											let res=JSON.parse(uploadFileRes.data)
											if(res.code==0){
												that.ima=res.imgurl
												that.atipsis=0
											}else{
												that.atipsis=1
												that.errmsg=res.msg
												console.log(that.errmsg)
											}
										},
										fail(se) {
											console.log(se,1)
										}
									});
							uploadTask.onProgressUpdate((res) => {
								that.apro=res.progress
								console.log('上传进度' + res.progress);
								console.log('已经上传的数据长度' + res.totalBytesSent);
								console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
							});
					}
				});
			},
			ChooseImageb() {
				var that=this
				that.bup=true
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
							this.imgListb = res.tempFilePaths
							const uploadTask = uni.uploadFile({
										url: that.app.apiHost+'/uploadImage', //仅为示例，非真实的接口地址
										filePath: this.imgListb[0],
										header:{'Authorization':'bearer '+that.app.getAuthCode()},
										name: 'image',
										success: (uploadFileRes) => {
											console.log(uploadFileRes.data,56);
											let res=JSON.parse(uploadFileRes.data)
											if(res.code==0){
												that.imb=res.imgurl
												that.btipsis=0
											}else{
												that.btipsis=1
												that.berrmsg=res.msg
												console.log(that.berrmsg)
											}
										}
									});
									uploadTask.onProgressUpdate((res) => {
										that.bpro=res.progress
										console.log('上传进度' + res.progress);
										console.log('已经上传的数据长度' + res.totalBytesSent);
										console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
									});
					}
				});
			},
			ViewImage(e) {
				if(e.currentTarget.dataset.da=="a"){
					uni.previewImage({
						urls: this.imgList,
						current: e.currentTarget.dataset.url
					});
				}else{
					uni.previewImage({
						urls: this.imgListb,
						current: e.currentTarget.dataset.url
					});
				}
			},
			DelImg(e) {
				if(e.currentTarget.dataset.da=="a"){
					this.atipsis=2
					this.imgList.splice(e.currentTarget.dataset.index, 1)
				}else{
					this.btipsis=2
					this.imgListb.splice(e.currentTarget.dataset.index, 1)
				}
			},
		}
	}
</script>

<style>
	page{
	  background-color:#f1f1f1;
	}
	.kuang{
		border: #f60 dashed 1px;
		border-radius: 5px;
	}
	.kuangs{
		border: #e03997 dashed 1px;
		border-radius: 5px;
	}
	.kuangg{
		border: #39b54a dashed 1px;
		border-radius: 5px;
	}
	.progress{
		position: absolute !important;
		bottom: 0;
		padding-bottom: 0 !important;
		height: 4px !important;
	}
</style>
